<template>
  <div class="profile-container">
    <Header title="个人中心" />

    <div class="profile-content">
      <!-- 用户信息卡片 -->
      <div class="user-card">
        <div class="user-avatar">
          <van-image
            :src="userInfo?.avatar || defaultAvatar"
            round
            fit="cover"
            width="60"
            height="60"
          />
        </div>
        <div class="user-info">
          <div class="user-name">{{ userInfo?.nickname || userInfo?.email }}</div>
          <div class="user-email">{{ userInfo?.email }}</div>
          <div class="user-role">{{ getRoleText(userInfo?.role) }}</div>
        </div>
        <div class="user-action">
          <van-icon name="arrow" />
        </div>
      </div>

      <!-- 存储统计 -->
      <div class="storage-card">
        <div class="storage-header">
          <h3>存储空间</h3>
          <span class="storage-usage">{{ usagePercentage }}%</span>
        </div>
        <van-progress
          :percentage="usagePercentage"
          color="#1989fa"
          track-color="#f5f5f5"
          :stroke-width="6"
        />
        <div class="storage-info">
          <span>已使用 {{ formatFileSize(usedStorage) }}</span>
          <span>总容量 {{ formatFileSize(storageQuota) }}</span>
        </div>
      </div>

      <!-- 功能菜单 -->
      <div class="menu-section">
        <van-cell-group inset>
          <van-cell
            title="回收站"
            icon="delete-o"
            is-link
            @click="$router.push('/recycle')"
          />
          <van-cell
            title="我的分享"
            icon="share-o"
            is-link
            @click="$router.push('/share')"
          />
          <van-cell
            title="上传管理"
            icon="upgrade"
            is-link
            @click="$router.push('/upload')"
          />
        </van-cell-group>
      </div>

      <div class="menu-section">
        <van-cell-group inset>
          <van-cell
            title="设置"
            icon="setting-o"
            is-link
            @click="$router.push('/settings')"
          />
          <van-cell
            title="帮助与反馈"
            icon="question-o"
            is-link
            @click="$router.push('/help')"
          />
          <van-cell
            title="关于"
            icon="info-o"
            is-link
            @click="$router.push('/about')"
          />
        </van-cell-group>
      </div>

      <!-- 退出登录 -->
      <div class="logout-section">
        <van-button
          block
          type="danger"
          @click="handleLogout"
        >
          退出登录
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showConfirmDialog, showToast } from 'vant'
import Header from '@/components/Header.vue'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const {
  userInfo,
  usedStorage,
  storageQuota,
  usagePercentage,
  userLogout,
  refreshUserInfo,
  formatFileSize
} = userStore

// 默认头像
const defaultAvatar = 'https://img.yzcdn.cn/vant/cat.jpeg'

// 获取角色文本
const getRoleText = (role?: number) => {
  switch (role) {
    case 1:
      return '管理员'
    case 0:
    default:
      return '普通用户'
  }
}

// 退出登录
const handleLogout = async () => {
  const confirmed = await showConfirmDialog({
    title: '确认退出',
    message: '确定要退出登录吗？'
  })

  if (confirmed) {
    try {
      userLogout()
      showToast({
        type: 'success',
        message: '已退出登录',
        onClose: () => {
          router.replace('/login')
        }
      })
    } catch (error) {
      showToast({
        type: 'fail',
        message: '退出登录失败'
      })
    }
  }
}

onMounted(() => {
  refreshUserInfo()
})
</script>

<style scoped>
.profile-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
}

.profile-content {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 80px;
}

.user-card {
  margin: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.user-avatar {
  margin-right: 16px;
  flex-shrink: 0;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-email {
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-role {
  font-size: 12px;
  opacity: 0.7;
}

.user-action {
  margin-left: 12px;
  opacity: 0.8;
}

.storage-card {
  margin: 16px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.storage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.storage-header h3 {
  margin: 0;
  font-size: 16px;
  color: #323233;
}

.storage-usage {
  font-size: 14px;
  font-weight: 500;
  color: #1989fa;
}

.storage-info {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: #969799;
}

.menu-section {
  margin: 16px 0;
}

.logout-section {
  margin: 24px 16px 16px;
}

:deep(.van-cell) {
  font-size: 16px;
}

:deep(.van-cell__title) {
  color: #323233;
}

:deep(.van-cell__left-icon) {
  color: #1989fa;
  margin-right: 12px;
}

:deep(.van-progress__portion) {
  border-radius: 3px;
}

:deep(.van-button--danger) {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  border: none;
  border-radius: 8px;
  height: 44px;
  font-size: 16px;
}
</style>